<!-- 项目9：使用Bootstrap制作响应式页面
目标：使用Bootstrap框架快速制作一个响应式网页
内容：
介绍Bootstrap基本概念
使用Bootstrap组件和栅格系统制作响应式页面
基础知识点链接：

Bootstrap官方文档
HTML基础
CSS基础
响应式设计
通过项目9的学习，你将掌握如何使用Bootstrap框架快速制作响应式网页，了解Bootstrap的基本概念和使用方法，能够使用Bootstrap的组件和栅格系统创建美观且功能丰富的网页。 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap响应式页面</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">品牌</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">首页</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">功能</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">价格</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">禁用</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container mt-5" style="min-height: calc(100vh - 56px - 56px - 6rem);">
        <div class="row">
            <div class="col-md-8">
                <h1>欢迎来到Bootstrap页面</h1>
                <p>这是一个使用Bootstrap制作的响应式页面示例。</p>
            </div>
            <div class="col-md-4">
                <h2>侧边栏</h2>
                <p>侧边栏内容...</p>
            </div>
        </div>
    </div>

    <footer class="bg-light text-center text-lg-start mt-5">
        <div class="text-center p-3">
            © 2024 个人博客
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
